/* hook组件 useRef */
import React, {useEffect, useRef, useState} from 'react'
import {Button} from "antd";

/*
* 1. 基于ref={函数}的方式，可以把创建的dom元素(子组件实例)赋值给box变量    不推荐
* 2. 基于 React.createRef 创建 ref 对象来获取
* 3. 基于 useRef Hook函数，创建 一个 ref 对象
*      + React.createRef 创建ref对象，既可以在类组件，也可以在函数组件使用
*      + 所有 hook函数 智能在函数组件使用，在类组件中会报错
*
*   useRef 在每一次组件更新的时候(函数重新执行)，再次执行，不会拆功能键新的 ref对象
*   React.create()  在每一次组件更新的时候，会重新新的ref对象，比较浪费性能
* */

let prev1,
    prev2
const Demo = function () {
    console.log('render')
    let [num, setNum] = useState(0)

    let box1 = useRef(null),
        box2 = React.createRef()
    if (!prev1) {
        // 第一次Demo执行，把第一次创建的ref对象赋值给变量
        prev1 = box1
        prev2 = box2
    } else {
        // 第二次Demo执行，我们验证一下，新创建的ref对象，和之前第一次创建的是否一致？
        console.log(prev1 === box1, 1) // true
        console.log(prev2 === box2, 2)// false
    }
    useEffect(() => {
        console.log(box1.current, 11)
        console.log(box2.current, 22)
    }, [])

    const handle = () => {
        setNum(num + 1)
    }
    return <div className="demo">
        <span className="num" ref={box1}>num:{num}</span>
        <span className="num" ref={box2}>num:{num}</span>
        <Button type="primary" size="small" onClick={handle}>新增</Button>
    </div>
}

// 3
// const Demo = function () {
//     console.log('render')
//     let [num, setNum] = useState(0)
//
//     let box = useRef(null)
//     useEffect(() => {
//         console.log(box.current)
//     }, [])
//
//     const handle = () => {
//         setNum(0)
//     }
//     return <div className="demo">
//         <span className="num" ref={box}>num:{num}</span>
//         <Button type="primary" size="small" onClick={handle}>新增</Button>
//     </div>
// }

// 2
// const Demo = function () {
//     console.log('render')
//     let [num, setNum] = useState(0)
//
//
//     let box = React.createRef()
//     useEffect(() => {
//         console.log(box.current)
//     }, [])
//
//     const handle = () => {
//         setNum(0)
//     }
//     return <div className="demo">
//         <span className="num" ref={box}>num:{num}</span>
//         <Button type="primary" size="small" onClick={handle}>新增</Button>
//     </div>
// }

// 1
// const Demo = function () {
//     console.log('render')
//     let [num, setNum] = useState(0)
//
//
//     let box
//     useEffect(() => {
//         console.log(box)
//     }, [])
//
//     const handle = () => {
//         setNum(0)
//     }
//     return <div className="demo">
//         <span className="num" ref={x => box = x}>num:{num}</span>
//         <Button type="primary" size="small" onClick={handle}>新增</Button>
//     </div>
// }

export default Demo